<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>欢太官网</title>
    <link rel="shortcut icon" type="image/x-icon" href="//image.oppo.com/content/dam/heytap-brand/assets/favicon.ico">
    <script src="../js/axios.min.js"></script>
    <style>
      body {
        background-image: url(https://id.heytap.com/new/images/login-bg.56a249bc.png);
        background-repeat: no-repeat;
        background-size: cover;
      }
      div {
        width: 300px;
        height: 400px;
        background-color: rgba(197, 245, 197, 0.329);
        margin: 100px auto;
        position: relative;
        text-align: center;
      }
      p {
        font-size: 20px;
      }
      input {
        width: 200px;
        height: 50px;
        margin-top: 30px;
        border-radius: 5px;
        border: 0.5px solid rgb(42, 209, 129);
      }
      button {
        width: 100px;
        height: 40px;
        margin-top: 50px;
        background-color: rgb(42, 209, 129);
        border: none;
        color: white;
        border-radius: 5px;
      }
      a{
        text-decoration:none;
        position: absolute;
        right: 10px;
        bottom: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>账号登录</h1>
      <p>密码登录</p>
      <input type="text" name="" id="" placeholder="请输入手机号码" />
      <input type="password" name="" id="" placeholder="请输入密码" />
      <button>登录</button>
      <a href="注册.html">立即注册</a>
    </div>
    <script>
      /*      接口地址：http://jx.xuzhixiang.top/ap/api/login.php
        接口请求方式：get
        接口参数：
             username用户名
             password密码
        使用方式
             http://jx.xuzhixiang.top/ap/api/login.php?username=11&password=1212
  
        服务器返回json数据 */
      let input = document.querySelectorAll("input");
      let button = document.querySelector("button");
      button.onclick = function () {
        console.log(1);
        let username = input[0].value;
        let password = input[1].value;
        let address = "http://jx.xuzhixiang.top/ap/api/login.php";
        axios.get(address, { params: { username, password } }).then((r) => {
          console.log(r.data);
          let res = r.data.data;
          console.log(r.data.code);
          let res1 = /^1[3-9]\d{9}$/;
          let res2 = /^\w{6,12}$/;
          if (res1.test(username) === true && res2.test(password) == true) {
            if (r.data.code == 1) {
            localStorage.setItem("uid", res.id);
            localStorage.setItem("token", res.token);
            localStorage.setItem("username", res.username);
            localStorage.setItem("password", res.password);
            location.href = "首页.html";
          }
            console.log("输入成功");
          } else {
            alert("手机号或密码有错误");
          }
          
          /* if (res3.test(password) == true) {
            console.log("已输入密码");
          } else {
            alert("密码不正确");
          } */
           
        });
      };
    </script>
  </body>
</html>
